<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="top-bar-bg"></view>
		<view class="top-bar rel p-md flex-between bg" :class="{'hover' : scrollTop > 0}" style="position: sticky;top: 0;z-index: 20;">
			<view class="status_bar">
			    <!-- 这里是状态栏 -->
			</view>
			<!-- 左上角logo -->
			<view class="m-r-sm">
				<image :src="configInfo.app_logo ? configInfo.app_logo : '../../static/images/task-title.png'" mode="widthFix" style="max-width: 120rpx;"></image>
			</view>
			<view style="flex:1">
				<u-search 
					:placeholder="$t('search.placeholder')"
					:show-action="true" 
					:actionText="$t('search.btn')" 
					:animation="true" 
					shape="round"
					@custom="searchHistory"
					@search="searchHistory"
				>
				</u-search>
			</view>
			<view class="top-bar_message m-l-md flex-center">
				<view class="meta_message position-relative flex-center" @click="$util.go('message/message',{login:true})">
					<m-icon name="message-3-line" size="45rpx" color="#333" textSize="24rpx" :textColor="configInfo.btbColor"></m-icon>
					<u-badge class="meta-message-badge" type="error" shape="circle" max="99" :value="userInfo.message.total - userInfo.message.read_total" v-if="userInfo"></u-badge>
				</view>
			</view>
			<!-- <m-icon name="copper-diamond-line" size="50rpx" class="m-l-sm"></m-icon> -->
		</view>
		
		<!-- 显示推荐任务列表  -->
		<view class="rec-list rel m-b-md" v-if="topList.length > 0">
			<view>
				<u-scroll-list :indicator="false"  indicatorColor="#f8513f10" indicatorActiveColor="#f8513f">
					<view class="rec-list_list p-l-sm p-r-sm" style="flex-direction: row;">
						<view class="rec-list_item p-l-xs p-r-xs" v-for="(item, index) in topList" :key="index" @click="$util.go('task/task_detail?id='+item.id)">
							<view class="rec-list_item-warper section-bg radius-10">
								<view class="p-sm flex-center flex-column">
									<view class="m-b-sm" v-if="item.thumb_src">
										<u-image :src="item.thumb_src" width="80rpx" height="80rpx" :lazy-load="true" radius="50px"></u-image>
									</view>
									<view class="rec-list_item-title flex-start">
										<text class="title u-line-1 text-sm text-default">{{ item.title }}</text>
									</view>
									<view class="rec-list_item-price" v-if=" item.type == 1">
										<text class="number" :style="{'color':configInfo.mainColor1}">+ {{ item.unit_price }}</text>
										<text class="text-xs m-l-xs text-secondary" v-if="configInfo.money_company">{{configInfo.money_company}}</text>
									</view>
									<view class="rec-list_item-price" v-if=" item.type == 2">
										<text class="number" :style="{'color':configInfo.mainColor1}">+ {{ item.unit_price }}</text>
										<text class="text-xs m-l-xs text-secondary" v-if="configInfo.money_company">元/{{ item.salaryp_pany_text }}</text>
									</view>
									<view>
										<text class="text-xs text-auxiliary">{{ item.join_num }}人已完成</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 金刚区 -->
		<view class="section-bg rel m-r-md m-l-md m-b-md radius-10" v-if="indexConfig.navs.length > 0">
			<m-navs
				:list="indexConfig.navs" 
				size="35" 
				labelSize="25rpx" 
				space="8px"
			>
			</m-navs>
		</view>
		
		<!-- 首页公告 -->
		<view class="section-bg m-r-md m-l-md m-b-md radius-10 notice-bar" v-if="indexConfig.notices.length > 0">
			<u-notice-bar
				:color="configInfo.mainColor1"
				class="text-xs" 
				direction="column" 
				:text="indexConfig.noticesText" 
				bgColor="transparent" 
				duration="3000"
				@click="noticeClick"
			>
			</u-notice-bar>
		</view>
		
		<!-- 切换 -->
		<u-tabs 
			:itemStyle="{'padding':'25rpx 20rpx','font-size':'10rpx!important'}" 
			lineWidth="30" 
			:list="sortList" 
			:lineColor="configInfo.mainColor" 
			@click="clickSort" 
			:scrollable="false"
			class="section-bg m-l-md m-r-md radius-10 rel"
		>
		</u-tabs>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<m-tasks :list="list.data" v-if="!listLoad"></m-tasks>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		
		<view class="flex-column flex-center m-t-md">
			<!-- #ifdef H5 -->
			<view class="text-xs text-secondary" v-if="configInfo.site_icp" @click="$util.go('https://beian.miit.gov.cn/', {type:'link', is_tips:false})" >
				ICP备案号：{{configInfo.site_icp}}
			</view>
			<view class="text-xs text-secondary m-t-sm" v-if="configInfo.site_gongan" @click="$util.go('https://beian.mps.gov.cn/#/query/webSearch', {type:'link', is_tips:false})" >
				公安网备案：{{configInfo.site_gongan}}
			</view>
			<!-- #endif -->
		</view>
		
		<!-- 首页弹窗 -->
		<u-popup class="transparent-popup" :show="indexPopup" mode="center" bgColor="transparent" :closeabl="true" @close="closeIndexPopup" v-if="configInfo.index_popup">
		    <view @click="clickIndexPopup">
				<image :src="configInfo.index_popup_img" mode="widthFix">
			</view>
		</u-popup>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop" :backShow="false"></side-tools>
		<!-- {{configInfo.app_icon}} -->
		<m-login-bar :appName="configInfo.app_name" :appIcon="configInfo.app_icon" v-if="!userInfo && configInfo"></m-login-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				listLoad:true,
				status:"loading",
				showLoading:false,
				scrollTop:0,
				pageLoading:true,
				cateOn:0,
				endTimeData:{},
				showTopList:false,
				sortList:[{
					name: this.$t('task-list.tabbar-1'),
					sort: 	'rand'
				},{
					name: this.$t('task-list.tabbar-2'),
					sort: 	'read_count'
				},{
					name: this.$t('task-list.tabbar-3'),
					sort: 	'id'
				},{
					name: this.$t('task-list.tabbar-4'),
					sort: 	'unit_price'
				}],
				noticeText: [],
				indexPopup: false,
				
				
			}
		},
		computed: {
			...mapState({
				indexConfig: state => state.content.indexConfig, // 首页配置数据
				userInfo: state => state.user.userInfo,
				configInfo: state => state.config.configInfo,
				param: state => state.task.indexParam,  
				list: state => state.task.indexList,
				topParam : state => state.task.topParam,  
				topList: state => state.task.topList,
				contentText: state => state.content.contentText,
				taskTrends:  state => state.task.taskTrends,
				activeSort: state => state.task.taskSortIndex,
			})
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onLoad(){
			// 初始化首页
			this.init()
		},
		
		onHide(){
			this.$util.hideAll()
		},
		
		// 下拉刷新
		onPullDownRefresh(){
			this.changeTopTask()
			this.getList()
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);		
		},
		
		methods: {
			...mapActions(['getIndexConfig', 'getUserInfo', 'getTaskCate','getTaskList','getTopTaskList']),
			...mapMutations(['updateTaskState']),
			
			// 初始化首页
			init(){
				// 获取首页配置数据
				this.getIndexConfig()
				
				// 是否显示弹窗
				if(this.configInfo.index_popup == 1 && !uni.getStorageSync('index_popup')){
					this.indexPopup = true
				}
				
				// 更新首页标题
				uni.setNavigationBarTitle({
					title: this.configInfo.app_name
				});
				
				// 获取任务
				this.getList()
				this.changeTopTask()
			},
			
			onChangeEndTime(e){
				this.endTimeData = e
			},

			
			// 获取任务列表
			async getList(page = 0){
				let param = uni.$u.deepClone(this.param)
				if (page) {
					param.page = page
					param.category_id = ''
					this.updateTaskState({
						key: 'indexParam',
						val: param
					})
				}
				await this.getTaskList(param)
				this.listLoad = false;
			},
			
			// 获取推荐任务
			async changeTopTask(){
				this.showTopList = false
				let {
					topParam
				} = this
				await this.getTopTaskList(this.topParam)
				this.showTopList = true
			},

			searchHistory:function(value){
				if(value){
					// 存在搜索值
					let page = 'search/search?key='+value;
					this.$util.go(page,{login:true});
				}
				// 搜索展示
			},
			
			
			// 切换排序
			async clickSort(e){
				this.listLoad = true;
				let {
					param
				} = this
				param.sort = e.sort
				this.updateTaskState({
					key: 'indexParam',
					val: param
				})
				await this.getList()
			},
			
			noticeClick(e){
				console.log(e)
				let {
					notices
				} = this.indexConfig
				const id = notices[e].id
				if(id){
					this.$util.go('article/article_detail?id='+id)
				}
			},
			
			// 点击首页弹窗
			clickIndexPopup(){
				let type = this.configInfo.index_popup_type
				let url = this.configInfo.index_popup_url
				if(url){
					uni.setStorageSync('index_popup','true');
					if(type == 'page'){
						uni.navigateTo({
							url: url
						});
					}
					if(type == 'link'){
						this.$util.openUrl(url)
					}
					this.closeIndexPopup()
				}
			},
			
			// 关闭首页弹窗
			closeIndexPopup(){
				this.indexPopup = false
				uni.setStorageSync('index_popup','true');
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	// .page-index::-webkit-scrollbar{
	// 	display: none!important;
	// }
	.top-bar-bg{
	}
	.top-bar-bg::before{
		
	}
	.top-bar{
		transition: background .3s ease-out 0s;
	}
	.top-bar.bg{
		background-color: var(--main-color-1);
	}
	.meta-message-badge{
		position: absolute;
		left: 25rpx;
		top: -3px;
		font-size: 20rpx;
	}
	.u-scroll-list{
		padding-bottom:0
	}
	.rec-list{
		&_top-bg{
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			background: linear-gradient(to bottom,#efe7dc,#ffffff);
			/deep/ .i-icon{
				color:var(--main-color-2)!important;
			}
		}
		// &_notice-bar{
		// 	width:70%;
		// 	/deep/ .u-notice-bar{
				
		// 		padding: 0;
		// 		background: transparent!important;
		// 	}
		// 	/deep/ .u-notice__swiper__item__text{
		// 		font-size: 20rpx!important;
		// 	}
		// 	/deep/ .u-notice__swiper__item{
		// 		justify-content: flex-end;
		// 	}
		// }
		&_list{
			@include flex(column);
			max-width: 100%;
			width: 100%;
		}
		&_item{
			flex: none;
			width: 33.33%;
			overflow: hidden;	
		}
	}

	/deep/ .u-scroll-list{
		&__indicator{
			// margin: 10rpx!important;
			margin-top: 0!important;
			padding: 15rpx;
		}
	}
	.notice-bar{
		color:  var(--main-color-2)!important;
		// border: 1px solid var(--main-color-2);
		// background-color: var(--main-color-2)+'50';
		overflow: hidden;
	}
	// .notice-bar{
	// 	background-color: rgb(253, 246, 236);
	// 	// width:70%;
	// 	/deep/ .u-notice-bar{
	// 		// padding: 0;
	// 		// background: transparent!important;
	// 	}
	// 	/deep/ .u-notice__swiper__item__text{
	// 		font-size: 26rpx!important;
	// 	}
	// 	// /deep/ .u-notice__swiper__item{
	// 	// 	justify-content: flex-end;
	// 	// }
	// }
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}

</style>
